<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import * as echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '550px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    },
    xAxis: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    getLastThreeMonths() {
      const currentDate = new Date();
      const months = [];
      for (let i = 0; i < 1; i++) {
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        months.push(`${year}-${month}`);
        currentDate.setMonth(currentDate.getMonth() - 1);
      }
      return months.reverse();
    },
    setOptions(list = []) {

      const labelOption = {
        show: true,
        position: 'top'
      }

      this.chart.setOption({
        title: {
          text: '本月考核完成情况',
          textStyle: {
            color: '#000'
          }
        },
        xAxis: {
          data: ['项目收集', '销售跟单', '销售机会', '客户拜访', '市场活动', '周报'],//this.getLastThreeMonths(),
          // boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          //   top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          minInterval: 1,
          axisTick: {
            show: false
          }
        },
        // legend: {
        //   data: ['项目收集', '销售跟单', '销售机会', '客户拜访', '市场活动', '周报'], // 新增项目收集数，新增销售跟单数，新增销售机会数
        // },
        series: [
          {
            // name: '项目收集',
            // itemStyle: {
            //   normal: {
            //     color: '#3ec8c5',
            //     lineStyle: {
            //       color: '#3ec8c5',
            //       width: 2
            //     }
            //   }
            // },
            label: labelOption,
            smooth: true,
            type: 'bar',
            data: list,
            // animationDuration: 2800,
            // animationEasing: 'cubicInOut'
          },
          // {
          //   name: '销售跟单',
          //   smooth: true,
          //   type: 'bar',
          //   label: labelOption,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#3888fa',
          //   //     lineStyle: {
          //   //       color: '#3888fa',
          //   //       width: 2
          //   //     },
          //   //     areaStyle: {
          //   //       color: '#f3f8ff'
          //   //     }
          //   //   }
          //   // },
          //   data: salesMerchandiserList,
          //   // animationDuration: 2800,
          //   // animationEasing: 'quadraticOut'
          // },
          // {
          //   name: '销售机会',
          //   smooth: true,
          //   type: 'bar',
          //   label: labelOption,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#f5546e',
          //   //     lineStyle: {
          //   //       color: '#f5546e',
          //   //       width: 2
          //   //     },
          //   //     areaStyle: {
          //   //       color: '#f3f8ff'
          //   //     }
          //   //   }
          //   // },
          //   data: saleChanceList,
          //   // animationDuration: 2800,
          //   // animationEasing: 'quadraticOut'
          // },
          // {
          //   name: '客户拜访',
          //   smooth: true,
          //   type: 'bar',
          //   label: labelOption,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#f5546e',
          //   //     lineStyle: {
          //   //       color: '#f5546e',
          //   //       width: 2
          //   //     },
          //   //     areaStyle: {
          //   //       color: '#f3f8ff'
          //   //     }
          //   //   }
          //   // },
          //   data: saleChanceList,
          //   // animationDuration: 2800,
          //   // animationEasing: 'quadraticOut'
          // },
          // {
          //   name: '市场活动',
          //   smooth: true,
          //   type: 'bar',
          //   label: labelOption,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#f5546e',
          //   //     lineStyle: {
          //   //       color: '#f5546e',
          //   //       width: 2
          //   //     },
          //   //     areaStyle: {
          //   //       color: '#f3f8ff'
          //   //     }
          //   //   }
          //   // },
          //   data: saleChanceList,
          //   // animationDuration: 2800,
          //   // animationEasing: 'quadraticOut'
          // },
          // {
          //   name: '周报',
          //   smooth: true,
          //   type: 'bar',
          //   label: labelOption,
          //   // itemStyle: {
          //   //   normal: {
          //   //     color: '#f5546e',
          //   //     lineStyle: {
          //   //       color: '#f5546e',
          //   //       width: 2
          //   //     },
          //   //     areaStyle: {
          //   //       color: '#f3f8ff'
          //   //     }
          //   //   }
          //   // },
          //   data: saleChanceList,
          //   // animationDuration: 2800,
          //   // animationEasing: 'quadraticOut'
          // },
        ]
      })
    }
  }
}
</script>
